import {
	$
} from './library/jquery.js';
import './library/lazyload.js';

$('.pro-s1-tit>div>span').on('mouseenter', function () {
	$(this).addClass('tit-actived').siblings().removeClass('tit-actived');
	let _index = $('.pro-s1-tit>div>span').index(this);
	$('.pro-s1-list').eq(_index).removeClass('hide').siblings().addClass('hide');
})

$(function () {
	$("img.lazy").lazyload({
		effect: "fadeIn"
	});
});

let banner1 = $('.banner>ul>li').first().clone();
$('.banner>ul').append(banner1);
let i = 1;
$('.banner>ul>li').eq(0).children('.banner-info').css({
	'animation': 'bannerinfo .5s linear',
	'animation-fill-mode': 'both'
});

let flag1 = false;

function banner_start() {
	if (flag1) {
		return;
	}
	flag1 = true;

	if (i == 1) {
		$('.banner>ul>li').eq(i - 1).siblings().css('z-index', '3');
		$('.banner>ul>li').eq(i - 1).css('z-index', '2');
	};

	if (i < $('.banner>ul>li').length - 1) {

		$('.banner>ul>li').eq(i).children('.banner-info').css({
			'animation': 'bannerinfo .5s linear .8s',
			'animation-fill-mode': 'both'
		}); //当前图片文字添加动画
		$('.banner>ul>li').eq(i).siblings().children('.banner-info').css({
			'animation': '',
		}); //其他图片文字移除动画


		$('.banner>ul>li').eq(i).animate({
			left: 0,
		}, 800);
		$('.banner>ul>li').eq(i - 1).animate({
			left: '-16%',
		}, 800, function () {

			$('.banner>ul>li').eq(i).css('z-index', '3');
			$('.banner>ul>li').eq(i - 2).css({
				'z-index': '4',
				left: '-100%'
			});
			$('.banner>ul>li').eq(i - 1).css('z-index', '2');
			return flag1 = false;
		})

		if (i == 1 || i == 2 || i == 4 || i == 5) {

			$('.banner>div>span').css('background-color', 'rgba(255, 255, 255, 0.2)');
			$('.banner>div>span').eq(i).addClass('banner-actived2').siblings().removeClass('banner-actived2').removeClass('banner-actived');
		} else {

			$('.banner>div>span').css('background-color', 'rgba(0, 0, 0, 0.2)');
			$('.banner>div>span').eq(i).addClass('banner-actived').siblings().removeClass('banner-actived2').removeClass('banner-actived');
		}

		i++;

	} else {

		$('.banner>ul>li').eq(i).children('.banner-info').css({
			'animation': 'bannerinfo .5s linear .8s',
			'animation-fill-mode': 'both'
		}); //最后一张图片文字添加动画
		$('.banner>ul>li').eq(i).siblings().children('.banner-info').css({
			'animation': '',
		}); //其他图片文字移除动画

		$('.banner>div>span').css('background-color', 'rgba(0, 0, 0, 0.2)');
		$('.banner>div>span').eq(0).addClass('banner-actived').siblings().removeClass('banner-actived2').removeClass('banner-actived'); //按钮添加类名

		$('.banner>ul>li').eq(i).css('z-index', '3');
		$('.banner>ul>li').eq(i - 1).css('z-index', '2');

		$('.banner>ul>li').eq($('.banner>ul>li').length - 1).animate({
			left: 0,
			// 最后一张图动画
		}, 800);

		$('.banner>ul>li').eq(i - 1).animate({
			left: '-16%',
		}, 800, function () {

			$('.banner>ul>li').eq(0).children('.banner-info').css({
				'animation': 'bannerinfo .5s linear',
				'animation-fill-mode': 'both'
			});

			for (let j = 1; j < $('.banner>ul>li').length; j++) {
				$('.banner>ul>li').eq(j).css({
					'left': '100%',
					'z-index': 3
				})
			}
			$('.banner>ul>li').eq(0).css({
				'left': '0',
				'z-index': 2
			});


			return flag1 = false;
		}) //倒数第二张图动画


		i = 1;

	}

}
let timer = setInterval(banner_start, 3000);

$('.banner>div>span').on('click', function () {
	if (flag1) {
		return;
	}
	flag1 = true;

	let i2 = $('.banner>div>span').index(this); //获得点击按钮对应的图片索引

	$('.banner>ul>li').eq(i2).children('.banner-info').css({
		'animation': 'bannerinfo .5s linear .8s',
		'animation-fill-mode': 'both'
	}); //给当前图片文字添加动画
	$('.banner>ul>li').eq(i2).siblings().children('.banner-info').css({
		'animation': '',
	}); //给其他图片文字移除动画

	let i3;

	if ($('.banner>div>span').hasClass('banner-actived')) {
		i3 = $('.banner>div>span').index($('.banner-actived'));
	} else if ($('.banner>div>span').hasClass('banner-actived2')) {
		i3 = $('.banner>div>span').index($('.banner-actived2'));
	} //获取正在播放的图片索引

	if (i2 == 1 || i2 == 2 || i2 == 4 || i2 == 5) {
		$('.banner>div>span').css('background-color', 'rgba(255, 255, 255, 0.2)');
		$('.banner>div>span').eq(i2).addClass('banner-actived2').siblings().removeClass('banner-actived2').removeClass('banner-actived');
	} else {
		$('.banner>div>span').css('background-color', 'rgba(0, 0, 0, 0.2)');
		$('.banner>div>span').eq(i2).addClass('banner-actived').siblings().removeClass('banner-actived2').removeClass('banner-actived');
	}


	if (i2 < i3) {
		clearInterval(timer);

		$('.banner>ul>li').eq(i2).css({
			'left': '-100%',
			'z-index': 4
		})

		$('.banner>ul>li').eq(i2).animate({
			left: 0,
		}, 800);

		$('.banner>ul>li').eq(i3).animate({
			left: '16%',
		}, 800, function () {
			$('.banner>ul>li').eq(i3).css('left', '100%');
			$('.banner>ul>li').eq(i2).css('z-index', '2');

			for (let j = i2 + 1; j < $('.banner>ul>li').length; j++) {
				$('.banner>ul>li').eq(j).css({
					'left': '100%',
					'z-index': 3
				})
			}

			return flag1 = false;
		});

		i = i2 + 1;
		timer = setInterval(banner_start, 3000);
	} else if (i2 > i3) {

		clearInterval(timer);

		$('.banner>ul>li').eq(i2).css({
			'left': '100%',
			'z-index': 3,
		})

		$('.banner>ul>li').eq(i2).animate({
			left: 0,
		}, 800);

		$('.banner>ul>li').eq(i3).animate({
			left: '-16%',
		}, 800, function () {
			$('.banner>ul>li').eq(i3).css('left', '-100%');
			$('.banner>ul>li').eq(i2).css('z-index', '2');

			for (let i = 0; i < i2; i++) {
				$('.banner>ul>li').eq(i).css({
					'left': '-100%',
					'z-index': 4,
				})
			};

			for (let j = i2 + 1; j < $('.banner>ul>li').length; j++) {
				$('.banner>ul>li').eq(j).css({
					'left': '100%',
					'z-index': 3
				})
			}

			return flag1 = false;
		});

		i = i2 + 1;
		timer = setInterval(banner_start, 3000);

	} else {
		flag1 = false;
		return;
	}
})


$.ajax({
	type: "get",
	url: "../../interface/getData.php",
	dataType: "json",
	success: function (res) {

		let temp = '';
		res.forEach((elm, i) => {
			let pic = JSON.parse(elm.picture);
			let type = JSON.parse(elm.type);
			let color = type[0].color.split(',');
			temp += `
			<li>
				<a href="./02.details.html?id=${elm.id}">
					<p class="pro-new">${elm.new}</p>
					<div>
						<h4>${elm.title} ${color[0]}</h4>
						<p>${type[0].price}</p>
					</div>
					<img class="lazy" data-original="../${pic[0].src}" alt="">
				</a>
			</li>
			`

		})

		$('.load').html(temp);
		$("img.lazy").lazyload({
			effect: "fadeIn"
		});

		$('.load .pro-new').each(i => {
			if ($('.load .pro-new').eq(i).text() == '') {
				$('.load .pro-new').eq(i).css('display', 'none');
			}
		})
	}
});